<template>
  <div class="anchor-container">
    <div class="info-box">
      <div class="basic-info">
        <div class="left">
          <el-avatar :src="infoType.avatar ? infoType.avatar : headerImg" :size="90" />
        </div>
        <div class="info-card">
          <div v-for="field in fields" :key="field.key" class="info-row">
            <div class="label">{{ field.label }}：</div>
            <div class="value">
              <span v-if="field.key === 'hasEditButton'">
                {{ infoType[field.key] }}
              </span>
              <!-- （主播保证金） -->
              <template v-else-if="field.key === 'depositAmount'">
                <span class="m-r-4">{{ infoType[field.key] || "-" }}</span>
                <span v-if="field.key === 'depositAmount'" class="btn" @click="hasCheck">查看</span>
              </template>
              <!-- 所在地区 -->
              <span v-else-if="field.key === 'area'">{{ field.format(infoType) || "-" }}</span>

              <template v-else>
                <span v-if="field.key !== 'signedContract'" class="m-r-4">
                  {{ infoType[field.key] || "-" }}
                </span>
                <span v-if="field.key === 'signedContract'" class="btn">
                  <a v-if="infoType.signedContract" :href="infoType.signedContract">下载合同</a>
                  <span v-else>下载合同</span>
                </span>
                <span
                  v-if="
                    field.key === 'nameplate' ||
                    field.key === 'roomName' ||
                    field.key === 'roomSignature'
                  "
                  class="btn"
                  @click="handleEditClick(field.key)"
                >
                  编辑
                </span>
              </template>
            </div>
          </div>
        </div>
      </div>
      <!-- 时间选择 -->
      <div class="bottom">
        <div class="search">
          <el-select v-model="value" placeholder="今日" style="width: 80px">
            <el-option
              v-for="item in timeSlot"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div class="demo-date-picker">
            <div class="block">
              <el-date-picker
                v-model="dateValue"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </div>
        </div>
        <div class="other-info">
          <!-- 关注我的 -->
          <div v-for="(item, index) in statsData" :key="index" class="data-item">
            <div class="title">{{ item.title }}</div>
            <div v-for="(ele, index) in item.list" :key="index" class="item-box">
              <div class="label">{{ ele.label }}</div>
              <div class="value">
                <span v-if="ele.type === 'level'">{{ ele.value }}级</span>
                <span v-else-if="ele.type === 'crystal'">{{ ele.value }}个水晶</span>
                <div
                  v-else-if="ele.type === 'icon'"
                  style="display: flex; align-items: center; justify-content: flex-end"
                >
                  <span>{{ ele.value }}</span>
                  <span class="icon">
                    <img src="@/assets/dashboard/crystal.png" />
                  </span>
                </div>
                <span v-else>{{ ele.value }}{{ ele.type === "name" ? "" : "个" }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <DepositCheck ref="depositDialog" />
    </div>
    <div class="info-box">
      <span>敬请期待...</span>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "AnchorInfo",
};
</script>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
// import PlayDetail from "./components/PlayDetail.vue";
// import BreakDialog from "./BreakDiolog.vue";
// import EditGuardianDialog from "./EditGuardianDialog.vue";
// import { log } from "console";
import DepositCheck from "./DepositCheck.vue";
import { getDashboardInfo } from "@/api/dashboard/index";
import headerImg from "@/assets/register/default_avator.png";

const infoType = ref({
  avatar: "",
  name: "", //姓名
  userName: "", //昵称
  signedStartTime: "", //签约开始
  categoryDesc: "", //主播类别
  signedPerson: "",
  uid: "", //页面展示id
  signedEndTime: "",
  giftProportion: "",
  signedContract: "",
  depositAmount: "",
  // AffiliatedConference: "川A娱乐",
  nameplate: "",
  province: "", // 省
  city: "", // 市
  district: "", // 区
  area: "",
  roomName: "",
  roomSignature: "",
});

// // 字段配置数组
const fields = [
  { label: "姓名", key: "name" },
  { label: "昵称", key: "userName" },
  { label: "签约时间", key: "signedStartTime" },
  { label: "主播类型", key: "categoryDesc" },
  { label: "签约人", key: "signedPerson" },
  { label: "ID", key: "uid" },
  { label: "合约到期", key: "signedEndTime" },
  { label: "礼物比例", key: "giftProportion" },
  { label: "签约合同", key: "signedContract", hasDownloudButton: true },
  // {
  //   label: "所属公会",
  //   key: "AffiliatedConference",
  //   hasButton: true,
  // },
  {
    label: "主播保证金",
    key: "depositAmount",
    // hasCheckButton: true,
    format: (v: number) => (v ? `￥${v.toFixed(2)}` : ""),
  },
  {
    label: "守护铭牌",
    key: "nameplate",
  },
  {
    label: "所在地区",
    key: "area",
    format: (item: any) => {
      console.log("item:", item);
      return item.province + item.city + item.district;
    },
  },
  { label: "房间名称", key: "roomName", hasEditName: true },
  { label: "房间个签", key: "roomSignature", hasEditTag: true },
];
// 时间选择
const value = ref("");
const dateValue = ref<[Date, Date]>();
const timeSlot = ref([
  {
    value: "Option1",
    label: "今日",
  },
  {
    value: "Option2",
    label: "近7天",
  },
  {
    value: "Option3",
    label: "本月",
  },
]);
const statsData = [
  {
    title: "关注我的",
    total: "0",
    daily: "0",
    isHighlight: true,
    list: [
      {
        label: "总计关注：",
        value: 0,
      },
      {
        label: "日新增关注：",
        value: 0,
      },
    ],
  },
  {
    title: "我关注的",
    total: "0",
    daily: "0",
    list: [
      {
        label: "总计关注：",
        value: 0,
      },
      {
        label: "日新增关注：",
        value: 0,
      },
    ],
  },
  {
    title: "水晶",
    total: "0",
    daily: "0",
    showTooltip: true,
    list: [
      {
        label: "总计水晶：",
        value: 0,
      },
      {
        label: "日新增水晶：",
        value: 0,
      },
    ],
  },

  {
    title: "明星等级",
    level: "--",
    dailyCrystal: "0",
    list: [
      {
        label: "当前等级：",
        value: 0,
        type: "level",
      },
      {
        label: "日新增水晶：",
        value: 0,
        type: "icon",
      },
    ],
  },
  {
    title: "主播称号",
    progress: "距离下一级差：",
    progressValue: "0",
    list: [
      {
        label: "当前称号：",
        value: "-",
        type: "name",
      },
      {
        label: "距离新起之秀还差：",
        value: 0,
        type: "crystal",
      },
    ],
  },
];

const fetchUserInfo = async () => {
  try {
    console.log("fetchUserInfo------------");
    const res = await getDashboardInfo(`${localStorage.getItem("userBizId")}`);
    infoType.value.avatar = res.avatar || "";
    infoType.value.province = res.province;
    infoType.value.city = res.city;
    infoType.value.district = res.district;
    infoType.value.userName = res.userName;
    infoType.value.name = res.name;
    infoType.value.signedStartTime = res.signedStartTime;
    infoType.value.categoryDesc = res.categoryDesc;
    infoType.value.signedPerson = res.signedPerson;
    infoType.value.uid = res.uid;
    infoType.value.signedEndTime = res.signedEndTime;
    infoType.value.giftProportion = res.giftProportion;
    infoType.value.signedContract = res.signedContract;
    infoType.value.depositAmount = res.depositAmount;
    infoType.value.nameplate = res.nameplate;
    infoType.value.roomName = res.roomName;
    infoType.value.roomSignature = res.roomSignature;
  } catch (error) {
    console.error("获取用户信息失败:", error);
    ElMessage.error("获取用户信息失败，请稍后重试");
  }
};

onMounted(() => {
  fetchUserInfo();
});

const handleEditClick = (fieldKey: string) => {
  switch (fieldKey) {
    case "nameplate":
      handleEditNameplate();
      break;
    case "roomName":
      handleEditRoomName();
      break;
    case "roomSignature":
      handleEditRoomSignature();
      break;
  }
};

// 定义不同处理方法
const handleEditNameplate = () => {
  console.log("处理铭牌编辑逻辑");
  ElMessage.warning("当前铭牌不可修改");
};

const handleEditRoomName = () => {
  console.log("处理房间名称编辑");
  ElMessage.warning("对不起，您现在还没有成为正式主播");
};

const handleEditRoomSignature = () => {
  console.log("处理房间个签编辑");
  ElMessage.warning("对不起，您现在还没有成为正式主播");
};

// 查看保证金
const depositDialog = ref<InstanceType<typeof DepositCheck> | null>(null);
const hasCheck = () => {
  const params = {
    userBizId: "",
    depositAmount: "",
  };

  // 调用子组件
  depositDialog.value?.loadData(params);
};
</script>

<style lang="scss" scoped>
.anchor-container {
  .info-box {
    width: 100%;
    min-height: 400px;
    padding: 24px;
    margin: 0 auto;
    margin-bottom: 25px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 25px;
    background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
    box-shadow:
      inset 2px 1px 2px 1px #ffffff,
      0px 4px 8px 0px #eaf0ff;
    .basic-info {
      display: flex;
      .left {
        margin-right: 20px;
      }
      .info-card {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px 0;
        width: 100%;
        .info-row {
          width: 25%;
          display: flex;
          padding: 0 8px;
          box-sizing: border-box;
          font-weight: 400;
          .label {
            flex-shrink: 0;
            width: 100px;
            text-align: right;
            white-space: nowrap;
            padding: 6px;
            border-radius: 4px;
            font-weight: 500;
            color: #4e5969;
          }
          .value {
            flex: 1;
            width: 160px;
            border-radius: 4px;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 2px;

            .btn {
              cursor: default;
              color: #3c80ff;
            }
          }
        }
      }
    }
    .bottom {
      display: flex;
      margin-top: 10px;
      width: 100%;
      padding-top: 10px;
      display: block;
      opacity: 1;
      .search {
        height: 20%;
        width: auto;
        display: flex;
        text-align: center;
        align-items: center;
        margin-bottom: 20px;
        .demo-date-picker {
          margin-left: 20px;
          .block {
            margin: 20px 50px 20px 0px;
            width: calc(100% - 100px);
          }
        }
      }
      .other-info {
        display: flex;
        width: 90%;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 10px;

        .data-item {
          min-width: 200px;
          background-color: #ffffff;
          box-shadow: 0px 4px 8px 0px #eaf0ff;
          line-height: 32px;
          border-radius: 10px;
          padding: 14px 35px;
          font-size: 14px;

          .title {
            width: 100%;
            font-weight: bold;
            margin-bottom: 8px;
            margin-left: 10px;
          }

          .item-box {
            display: flex;
            margin-top: 2px;
            min-width: 200px;
            gap: 20px;
            overflow: hidden;
            .label {
              min-width: 126px;
              margin-left: 10px;
            }
            .value {
              text-align: right;

              .icon {
                display: flex;
                width: 16px;
                height: 16px;
                align-items: center;
                margin-left: 2px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
